<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title></title>
    <style>
        body{
            font-family:微软雅黑;
            font-size:14px}
        .title{
            background: #B6DF48;
            font-size:18px;
        }
        .content:nth-child(odd){
            background: #E8F3D1;}
        .title,.content{
            width:430px;
            height:36px;
            line-height:36px;
            border: 1px solid #dddddd;}
        .title,.content:not(:last-child){
            border-bottom:none;}
        .title div{
            text-align:center;
            float:left}
        .title .col-1,.content .col-1{
            width:130px;}
        .title .col-2,.content .col-2{
            width:160px;}
        .content{
            clear:both}
        .content div{
            text-align:center;
            float:left}
    </style>
</head>

<body>
<script type="text/javascript">
    var phones = [
        { brand : 'iPhone',sales : 5270 },
        { brand : 'Meizu',sales : 948 },
        { brand : 'HUAWEI',sales : 6490 },
        { brand : 'MI',sales : 4796 },
        { brand : 'Gionee',sales : 478 },
        { brand : 'vivo',sales : 7464 },
        { brand : 'Samsung',sales : 595 },
        { brand : 'OPPO',sales : 7637 },
        { brand : 'HONOR',sales : 5427 },
    ];
    phones.sort(function(a,b){
        var x = a.sales;
        var y = b.sales;
        return x > y ? 1 : -1;
    });
</script>
<div class="title">
    <div class="col-1">排名</div>
    <div class="col-2">品牌</div>
    <div class="col-1">总销量（万部）</div>
</div>
<script type="text/javascript">
    for(var i=0;i<phones.length;i++){
        document.write("<div class='content'>");
        document.write("<div class='col-1'>"+(phones.length-i)+"</div>");
        document.write("<div class='col-2'>"+phones[i].brand+"</div>");
        document.write("<div class='col-1'>"+phones[i].sales+"</div>");
        document.write("</div>");
    }
</script>
</body>
</html>
